import React, { useState } from 'react'

function Count() {
  const [count, setCount] = useState(0)
  const [selectNumber, setSelectNumber] = useState(1)

  const onChangeNumber = e => {
    setSelectNumber(parseInt(e.target.value))
  }

  const increment = () => {
    setCount(count + selectNumber)
  }

  const decrement = () => {
    setCount(count - selectNumber)
  }

  const incrementIfOdd = () => {
    if (count % 2 !== 0) {
      setCount(count + selectNumber)
    }
  }

  const incrementIfAsync = () => {
    setTimeout(() => {
      setCount(count + selectNumber)
    }, 500)
  }

  return (
    <div style={{ width: 500, margin: '0 auto' }}>
      <h1>当前求和为：{count}</h1>
      <select onChange={onChangeNumber}>
        <option value='1'>1</option>
        <option value='2'>2</option>
        <option value='3'>3</option>
      </select>
      <button onClick={increment}>+</button>
      <button onClick={decrement}>-</button>
      <button onClick={incrementIfOdd}>当前求和为奇数再加</button>
      <button onClick={incrementIfAsync}>异步加</button>
    </div>
  )
}

export default Count
